<template>
	<view class="upload-wrap">
		<view class="list">
			<view class="item interval" v-for="(item, index) in fileList" :key="index">
				<image class="file-image" :src="item" v-if="item" mode="aspectFill"></image>
				<image v-if="showType != 2" @click.stop="handleRemove(index)" class="icon-close"
					src="http://k8s.vendingtech.vip/images/icon_close_disease_picture@2x.png"></image>
			</view>
			<view class="item" @click="chooseImage" v-if="fileList.length < limit && showType != 2">
				<image v-if="noImgUrl" class="file_img2" :src="noImgUrl" mode="aspectFill"></image>
				<image v-if="!noImgUrl" class="file" src="http://k8s.vendingtech.vip/images/photo@2x.png"
					mode="aspectFill"></image>
				<view v-if="!noImgUrl" class="item-txt">上传照片</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiUrl } from '../../config';
import qiniuUploader from './qiniuUploader.js';
export default {
	props: {
		showType: {
			type: Number,
			default: 1
		},
		limit: {
			type: Number,
			default: 5
		},
		// url: {
		// 	type: String,
		// 	required: true
		// },
		name: {
			type: String,
			default: 'file'
		},
		formData: {
			type: Object,
			default() {
				return {};
			}
		},
		header: {
			type: Object,
			default() {
				return {};
			}
		},
		fileList: {
			type: Array | String,
			default() {
				return [];
			}
		},
		token: {
			type: String,
			default: ''
		},
		fileKey: {
			type: String,
			default: ''
		},
		noImgUrl: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			imgKeyList: []
		};
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: this.limit - this.fileList.length,
				success: chooseImageRes => {
					chooseImageRes.tempFilePaths.forEach(key => {
						const uploadTask = uni.uploadFile({
							url: apiUrl + '/aos/api/qiniu/upload',
							name: this.name,
							filePath: key,
							formData: this.formData,
							header: this.header,
							success: uploadFileRes => {
								this.$emit('on-success', JSON.parse(uploadFileRes.data));
							},
							fail: err => {
								this.$emit('on-error', err);
							}
						});
						uploadTask.onProgressUpdate(res => {
							this.$emit('on-process', res);
						});
					});
				}
			});
		},
		handleRemove(index) {
			this.$emit('on-remove', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.upload-wrap {
	margin-top: 20rpx;

	.list {
		display: flex;
		flex-wrap: wrap;

		.item {
			position: relative;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			// border: 2rpx solid #d9d9d9;
			background-color: #f3f3f3;
			margin-bottom: 20rpx;

			&.interval {
				margin-right: 16rpx;
				// margin-right: 50rpx;
				border: none;
			}

			.file {
				width: 54rpx;
				height: 54rpx;
				display: block;
				margin: 24rpx auto 0;
			}

			.file_img2 {
				width: 140rpx;
				height: 140rpx;
				display: block;
				// margin: auto 0;
			}

			.file-image {
				width: 140rpx;
				height: 140rpx;
				display: block;
			}

			.item-txt {
				font-size: 18rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 13rpx;
				text-align: center;
			}

			.icon-close {
				// border: 20rpx solid transparent;
				box-sizing: border-box;
				background-clip: padding-box;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				z-index: 999;
			}

			.icon {
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
}
</style>
